import 'package:animations/animations.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

// 记得添加依赖 animations: ^1.1.1

void main() => runApp(RootApp());

// 定义根目录Wigdget
class RootApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 根视图
    return MaterialApp(home: homePage());
  }
}

class homePage extends StatefulWidget {
  @override
  _homePageState createState() => _homePageState();
}

class _homePageState extends State<homePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("精品应用")),
      body: Column(children: [
        InkWell(
          onTap: () {
            showScanPicFunction();
          },
          child: Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(10),
            color: Colors.white,
            child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Image.asset("images/3.0/logo.jpg",
                      width: 77, height: 77, fit: BoxFit.fill),
                  SizedBox(
                    width: 10,
                  ),
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text("每日分享精彩人生",
                            style:
                                TextStyle(color: Colors.black, fontSize: 22)),
                        Text(
                            "2020年2月21日，Flutter 团队发布的这个动画包，作为最新宣布的 Material Desin （材质设计）运动系统的一部分。 Material Design 是一个设计系统，支持 iOS、 Android、 web 和 Flutter 的原生实现。这个动画可以理解为是Material Design 的一个新增功能。 showModal () 函数是 animations 引入的一个新的全局函数，可用于在当前导航器中以模态的形式来显示。 于现有的 showGeneralDialog ()函数类似，是 material.dart 的一部分。 通过 ModalConfiguration 来配置模态显示，如进入和退出转换、转换的持续时间和模态障碍属性，FadeScaleTransitionConfiguration 为其子类，是一种新材质设计淡出转换的标准值。",
                            style: TextStyle(color: Colors.black, fontSize: 18))
                      ],
                    ),
                  ),
                ]),
          ),
        )
      ]),
    );
  }

  void showScanPicFunction() {
    showModal(
        context: context,
        configuration: FadeScaleTransitionConfiguration(
          transitionDuration: Duration(milliseconds: 200),
          reverseTransitionDuration: Duration(milliseconds: 300),
          barrierColor: Colors.black45,
          barrierDismissible: true,
        ),
        builder: (BuildContext context) {
          return ScanPage();
        });
  }
}

class ScanPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Theme(
        // 去除水波纹
        data: ThemeData(
          splashColor: Colors.transparent,
          // 去掉高亮
          highlightColor: Colors.transparent,
        ),

        child: InkWell(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Center(
            child: Image.asset("images/3.0/logo.jpg"),
          ),
        ),
      ),
    );
  }
}
